<template>
  <div class="prop">
			<div class="list-item item-1">
				<img src="https://cyxshop.oss-cn-beijing.aliyuncs.com/prop-1.png" class="thumb"/>
				<div class="info">
						<p class="name">自动浇水</p>	
						<p class="desc">介绍道具介绍道具介绍道具介绍道具介绍道具介绍道具介绍道具介绍道具介绍道具</p>
						<p class="price">价格 ￥279</p>
				</div>
				<div class="bnt">已拥有</div>
			</div>
			<div class="list-item item-2">
				<img src="https://cyxshop.oss-cn-beijing.aliyuncs.com/prop-2.png" class="thumb"/>
				<div class="info">
						<p class="name">自动采集能量</p>	
						<p class="desc">介绍道具介绍道具介绍道具介绍道具介绍道具介绍道具介绍道具介绍道具介绍道具</p>
				</div>
				<div class="bnt">购买</div>
			</div>
			<div class="list-item item-3">
				<img src="https://cyxshop.oss-cn-beijing.aliyuncs.com/prop-2.png" class="thumb"/>
				<div class="info">
						<p class="name">10倍产量</p>	
						<p class="desc">介绍道具介绍道具介绍道具介绍道具介绍道具介绍道具介绍道具介绍道具介绍道具</p>
				</div>
				<div class="bnt">购买</div>
			</div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      motto: 'Hello miniprograme',
      userInfo: {
        nickName: 'mpvue',
        avatarUrl: 'http://mpvue.com/assets/logo.png'
      }
    }
  },

  methods: {
    
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
		.list-item{
			height:110px;
			width: 345px;
			margin: 0 auto;
			border-radius: 4px;
			margin-bottom: 19px;
			position: relative;
		}
		
		.list-item .thumb{
			display: block;
			width: 60px;
			height: 60px;
			position: absolute;
			top: 15px;
			left: 15px;
		}
		
		
		.list-item .info{
			position: absolute;
			width: 150px;
			top: 20px;
			left: 90px;
			color: #FFFFFF;
		}
		
		.list-item .info .name{
			font-size: 15px;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
		}
		
		.list-item .info .desc{
			margin-top: 4px;
			font-size: 13px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
		}
		
		.list-item .info .price{
			margin-top: 4px;
			font-size: 13px;
		}
		
		.list-item.item-1{
			background: linear-gradient(to right, #73be68 , #00be97); /* 标准的语法 */
			margin-top: 23px;
		}
		
		.list-item.item-2{
			background: linear-gradient(to right, #ffca62 , #ffab41); /* 标准的语法 */
		}
		
		.list-item.item-3{
			background: linear-gradient(to right, #02aeff , #0097e6); /* 标准的语法 */
		}
		
		.list-item .bnt{
			width: 71px;
			height: 31px;
			border-radius: 31px;
			position: absolute;
			right: 15px;
			color: #ffffff;
			font-size: 15px;
			line-height: 31px;
			text-align: center;
			top: 30px;
		}
		
		.list-item.item-1 .bnt{
			background: #cccccc;
		}
		.list-item.item-2 .bnt{
			background: #ff9e1c;
		}
		.list-item.item-3 .bnt{
			box-sizing: border-box;
			background: #009ce9;
			border: 1px solid #FFFFFF;
		}
		
</style>
